<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Font Awesome 5 Preview</title>
		<link rel="icon" href="./favicon.png">
		<link rel="stylesheet" href="./vendor/font-awesome/css/all.css">
		<link rel="stylesheet" href="./vendor/ui/styles.css">
		<link rel="stylesheet" href="./css/main.css">
	</head>
	<body class="sidebar-fixed header-fixed">
		<div class="page-wrapper">
			<nav class="navbar page-header">
				<a href="#" class="btn btn-link sidebar-mobile-toggle d-md-none mr-auto">
					<i class="fa fa-bars"></i>
				</a>
				<a href="#" class="btn btn-link sidebar-toggle d-md-down-none">
					<i class="fa fa-bars"></i>
				</a>
				<!-- <img src="./images/logo.png" alt="logo" style="position: absolute; left: 60px;"> -->
				
				<div class="btn-group float-right" >
					<button id="icon-item-width-max" type="button" class="btn btn-outline-secondary"><i class="fa fa-expand-arrows-alt"></i></button>
					<button id="icon-item-width-plus" type="button" class="btn btn-outline-secondary"><i class="fa fa-plus"></i></button>
					<button id="icon-item-width-minus" type="button" class="btn btn-outline-secondary"><i class="fa fa-minus"></i></button>
					<button id="icon-item-width-min" type="button" class="btn btn-outline-secondary"><i class="fa fa-compress-arrows-alt"></i></button>
				</div>
			</nav>

			<div class="main-container">
				<div class="sidebar">
					<nav class="sidebar-nav">
						<ul class="nav">
							<li class="nav-title">Navigator</li>
		
							<li class="nav-item nav-dropdown">
								<a href="#" class="nav-link nav-dropdown-toggle">
									<i class="fa fa-code"></i> Styles <i class="fa fa-caret-left"></i>
								</a>

								<ul class="nav-dropdown-items">
									<li class="nav-item">
										<a id="style-all" value="%" href="#" class="nav-link active">
											<i class="fa fa-list-ul"></i> ALL
										</a>
									</li>
				
									<li class="nav-item">
										<a id="style-solid" value="1" href="#" class="nav-link">
											<i class="fa fa-address-card"></i> SOLID
										</a>
									</li>
				
									<li class="nav-item">
										<a id="style-regular" value="2" href="#" class="nav-link">
											<i class="far fa-address-card"></i> REGULAR
										</a>
									</li>
				
									<li class="nav-item">
										<a id="style-brands" value="3" href="#" class="nav-link">
											<i class="far fa-copyright"></i> BRANDS
										</a>
									</li>
								</ul>
							</li>

							<li class="nav-item nav-dropdown" style="display: none;">
								<a href="#" class="nav-link nav-dropdown-toggle">
									<i class="fa fa-toilet-paper"></i> Categories <i class="fa fa-caret-left"></i>
								</a>
								###CATEGORIESLIST###
							</li>
						</ul>
					</nav>
				</div>

				<div class="content">
					<div class="row">
						<div class="col-md-12">
							<div class="card">
								<div class="card-body" style="display: flex;">
									<div class="input-group float-left">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fa fa-key"></i></span>
										</div>
										<input type="text" class="form-control form-control-lg" placeholder="keywords" readonly>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="card">
								<div class="card-body">
									<ul class="icon-lists"></ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="scroll-to-top">
			<i class="fa fa-arrow-alt-circle-up"></i>
		</div>

		<div class="modal fade" id="modal" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Solid: <label class="select-all">address-book</label></h5>
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
		
					<div class="modal-body">
						<div style="text-align: center;">
							<i id="sample-icon" class="" style="margin: 0 0 10px;"></i>
						</div>

						<div class="input-group">
							<textarea id="sample-code-textarea" class="form-control" rows="2"></textarea>
							<span class="input-group-append">
								<button id="copy-sample-code" type="button" class="btn btn-dark" data-clipboard-target="#sample-code-textarea"><i class="far fa-copy"></i></button>
							</span>
						</div>

						<hr>

						<div class="btn-toolbar">
							<div class="btn-group btn-group-toggle mr-2" data-toggle="buttons">
								<button id="toolbar-normal-color" type="button" class="btn btn-outline-primary">Color</button>
								<button id="toolbar-normal-size" type="button" class="btn btn-outline-primary active">Size</button>
								<button id="toolbar-normal-border" type="button" class="btn btn-outline-primary">Border</button>
							</div>
							<div class="btn-group btn-group-toggle" data-toggle="buttons">
								<button id="toolbar-flip-h" type="button" class="btn btn-outline-primary">Flip H</button>
								<button id="toolbar-flip-v" type="button" class="btn btn-outline-primary">Flip V</button>
								<button id="toolbar-flip-both" type="button" class="btn btn-outline-primary">Flip Both</button>
							</div>
						</div>

						<div class="btn-toolbar" style="padding-top: 5px;">
							<div class="btn-group btn-group-toggle mr-2" data-toggle="buttons">
								<button id="toolbar-rotation-spin" type="button" class="btn btn-outline-primary">Spin</button>
								<button id="toolbar-rotation-pulse" type="button" class="btn btn-outline-primary">Pulse</button>
							</div>
							<div class="btn-group btn-group-toggle" data-toggle="buttons">
								<button id="toolbar-rotation-90" type="button" class="btn btn-outline-primary">Rotate 90</button>
								<button id="toolbar-rotation-180" type="button" class="btn btn-outline-primary">Rotate 180</button>
								<button id="toolbar-rotation-270" type="button" class="btn btn-outline-primary">Rotate 270</button>
							</div>
						</div>
					</div>

					<!-- <div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
					</div> -->
				</div>
			</div>
		</div>		

		<script src="./vendor/jquery/jquery-3.3.1.min.js"></script>
		<script src="./vendor/jquery/jquery.ba-resize.min.js"></script>
		<script src="./vendor/boorstrap/js/bootstrap.min.js"></script>
		<script src="./vendor/clipboard.js/clipboard.min.js"></script>
		<script src="./js/main.js"></script>
	</body>
</html>